<template>
  <div class="add-permission">
    <a-drawer
      :visible="visible"
      @close="close"
      :title="$t('breach.list.content.table.permission.title')"
      :width="550"
    >
      <a-button
        icon="plus"
        type="primary"
        class="mb-[10px]"
        @click="openModal"
        >{{ $t("user.verification-code.required1115661106") }}</a-button
      >
      <a-table
        :dataSource="tableInfo"
        :loading="listLoading"
        :columns="columns"
        :pagination="{ total }"
        @change="getList"
      >
        <template slot="SharingType" slot-scope="text, record">
          {{
            $t(
              permissionList.filter(
                (item) => item.value === record.SharingType
              )[0].label
            )
          }}
        </template>
        <template slot="operate" slot-scope="text, record">
          <a-popconfirm
            :title="$t('user.verification-code.required111566110577225')"
            :ok-text="$t('user.verification-code.required1166')"
            :cancel-text="$t('user.email.required11')"
            @confirm="() => del(record.Id)"
          >
            <a-button type="link">{{ $t("menu.exception.trigger") }}</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-drawer>
    <a-modal
      :title="$t('breach.list.content.table.permission.modal.title')"
      :width="550"
      :visible="modalVisible"
      :confirm-loading="confirmLoading"
      :ok-text="$t('user.v15')"
      :cancel-text="$t('user.email.required11')"
      @cancel="modalClose"
      @ok="submit"
    >
      <a-form :form="form" layout="horizontal">
        <a-form-item
          :label="$t('breach.list.content.table.permission.modal.adduser')"
        >
          <a-select
            :placeholder="
              $t('user.login.mobile.verification-code.placeholder2')
            "
            v-decorator="[
              'SharingUser',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.login.mobile.verification-code.placeholder2'
                    ),
                  },
                ],
              },
            ]"
            show-search
            @search="getUsers"
            :showArrow="false"
          >
            <a-select-option
              v-for="item in userList"
              :value="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :label="$t('breach.list.content.table.permission.modal.type')"
        >
          <a-radio-group
            v-decorator="[
              'SharingType',
              {
                rules: [
                  {
                    required: true,
                    message: $t('user.verification-code.required11156677'),
                  },
                ],
              },
            ]"
          >
            <a-radio
              v-for="item in permissionList"
              :key="item.value"
              :value="item.value"
              >{{ $t(item.label) }}</a-radio
            >
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { getUserList } from "@/api/common/form";
import {
  addSharing,
  deleteSharing,
  getSharingList,
} from "@/api/dataBreach/form";
export default {
  name: "addPermission",
  data() {
    return {
      visible: false,
      tableInfo: [],
      listLoading: false,
      columns: [
        {
          title: () => this.$t("user.verification-code.required1115661105714"),
          dataIndex: "SharingUser",
          key: "SharingUser",
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.list.content.table.permission.table.permission"),
          dataIndex: "SharingType",
          key: "SharingType",
          scopedSlots: { customRender: "SharingType" },
          align: "center",
        },
        {
          title: () =>
            this.$t("breach.list.content.table.permission.table.addtime"),
          dataIndex: "SharingCreatetime",
          key: "SharingCreatetime",
          align: "center",
        },
        {
          title: () => this.$t("di.menus"),
          dataIndex: "operate",
          key: "operate",
          scopedSlots: { customRender: "operate" },
          align: "center",
        },
      ],
      permissionList: [
        { label: "user.verification-code.required1115661105718", value: 1 },
        { label: "user.verification-code.required111566147", value: 2 },
      ],
      modalVisible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      userList: [],
      currentId: -1,
      total: 0,
    };
  },
  methods: {
    deleteSharing,
    open(Id) {
      this.currentId = Id;
      this.visible = true;
      this.getList();
    },
    close() {
      this.visible = false;
      this.tableInfo = [];
    },
    async getList(pagination) {
      this.listLoading = true;
      let { data } = await getSharingList({
        page: pagination?.current || 1,
        pageSize: pagination?.pageSize || 10,
        BreachId: this.currentId,
      });
      this.total = data.Total;
      this.tableInfo = data.Lists;
      this.listLoading = false;
    },
    modalClose() {
      this.modalVisible = false;
      this.form.resetFields();
    },
    async getUsers(value) {
      const { data } = await getUserList({ UserEmail: value, UserName: value });
      this.userList = data;
    },
    openModal() {
      this.modalVisible = true;
      this.getUsers();
    },
    submit() {
      this.form.validateFields(async (err, value) => {
        if (!err) {
          this.confirmLoading = true;
          // 加权限
          let resValue = { ...value };
          resValue.BreachId = this.currentId;
          resValue.SharingUser = resValue.SharingUser.replaceAll("/", "#@%$");
          await addSharing(resValue);
          this.modalClose();
          this.getList();
          this.confirmLoading = false;
        }
      });
    },
    async del(Id) {
      await deleteSharing({ Id });
      this.getList();
    },
  },
};
</script>

<style>
</style>